<template>
	<view>
		<!-- <view :class="isOpenModal?'fixed':''"> -->
		<view>
			<view>

				<view class="cu-form-group">
					<view class="title">料号</view>
					<input placeholder="" v-model="part" :disabled="true" />
					<button class="cu-btn bg-green shadow" @click="onReset">重置</button>
					
				</view>
				<view class="cu-form-group">
					<view class="title">订单</view>
					<input placeholder="" v-model="source_bill" :disabled="true" />
				</view>
				<view class="flex" style="border-top: 1rpx solid #eee;">
					<view class="flex-sub">
						<view class="cu-form-group">
							<view class="title">数量</view>
							<input placeholder="" v-model="num" :disabled="true" />
						</view>
					</view>
					<view class="flex-sub">
						<view class="cu-form-group">
							<view class="title">单位</view>
							<picker @change="
									e => {
										unit_idx = e.detail.value;
									}
								" :value="unit_idx"
							 :range="unit_list" range-key="other_unit">
								<view class="picker">
									<text v-if="unit_idx > -1">{{ unit_list[unit_idx].other_unit }}</text>
									<text v-else style="color:#888">请选择单位</text>
								</view>
							</picker>
						</view>
					</view>
				</view>

				<view class="flex" style="border-top: 1rpx solid #eee;">
					<view class="flex-sub">
						<view class="cu-form-group ">
							<view class="title">储位</view>
							<input placeholder="" v-model="bin" :disabled="true" />
						</view>

					</view>
					<view class="flex-sub">
						<view class="cu-form-group ">
							<view class="title">仓码</view>
							<input placeholder="" v-model="store" :disabled="true" />
						</view>
					</view>
				</view>



				<!-- <view class="cu-form-group margin-top">
					<view class="title">输入</view>
					<input placeholder="输入扫码信息" v-model="todoNum" @confirm="onConfirmTodo" name="input" />
				</view> -->
				<todo-input ref="todoIpt" v-model="todoNum" @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>

			</view>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					物料列表
				</view>
			</view>
			<!-- todolist -->
			<todo-list-view :top="660" class="cu-list menu">
				<view v-for="(item, idx) in todoList" class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-formfill text-blue margin-right-xs"></text>
							<text>料号:</text>
							{{ item.part_id }}

						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>PKG:</text>
							{{ item.pkg_id }}
						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>订单:</text>
							{{ item.source_bill }}
						</view>

					</view>
					<view class="action">
						<view class="text-grey text-xs">
							<text class="text-gray">数量:</text>
							{{ item.pkg_qty }}
						</view>
					</view>
				</view>

			</todo-list-view>


		</view>
	</view>
</template>

<script>
	import api from '@/serveices/wms-api.js';
	import billInput from './bill-input.vue';
	import todoInput from './todo-input';
	import todoListView from './todo-list-view.vue'
	import util from '@/serveices/util.js'
	export default {
		components: {
			billInput,
			todoInput,
			todoListView
		},
		data() {
			return {
				unit_list: [],
				unit_idx: -1,
				todoNum: '',
				todoFocus: true,
				todoList: [],
				part: '',
				source_bill: '',
				num: '',
				bin: '',
				store: ''
			};
		},
		computed: {},

		methods: {
			onTodoFocusChange(focus) {
				this.todoFocus = focus
			},
			onConfirmTodo() {
				if (this.unit_idx == -1) {
					//
					uni.showToast({
						title: '请首先选择单位',
						icon: 'none'
					});
					this.todoNum = ''
				} else if (!this.bin) {
					// 2.1.	储位文本框为空，输入内容作为储位处理
					api.checkbin(this.todoNum).then(res => {
						//wh_id
						this.bin = res.data.bin_id;
						this.store = res.data.wh_name;
						util.playSuccess()

					}).catch(er => {
						util.playFailed()
					}).finally(() => {
						this.todoNum = ''
					})
				} else {
					//2.2.	若储位文本框不为空，扫描内容作为物料信息处理
					api.initstore({
						opType: 'INITINVENTORY',
						billNo: this.source_bill || '',
						binId: this.bin,
						unitId: this.unit_list[this.unit_idx].other_unit_id,
						scanInfo: this.todoNum
					}).then(res => {
						this.todoList = res.data;
						if (this.todoList.length > -1) {
							var row = this.todoList[0]
							this.source_bill = row.source_bill
							this.num = row.pkg_qty
							this.part = row.part_id
							util.playSuccess()
						} else {
							util.playFailed()
						}
					}).catch(er => {
						util.playFailed()
					}).finally(() => {
						this.todoNum = ''
					})
				}
			},
			onReset(){
				this.todoNum=''
				this.todoList = []
				this.part = ''
				this.source_bill = ''
				this.num = ''
				this.bin = ''
				this.store = ''
				this.$refs.todoIpt.hideKeyboard()
				this.todoFocus
			}
		},
		beforeMount() {
			api.unit_list().then(res => {
				this.unit_list = res.data;
			});
		}
	};
</script>

<style>
	.fixed {
		position: fixed;
	}
</style>
